<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象和键盘事件</title>
</head>
<style type="text/css" >

    .box1{
        margin-top: 100px;
        margin-left: 100px;
        width: 200px;
        height: 200px;
        background-color: aqua;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box2{
        background-color: blueviolet;
        width: 100px;
        height: 100px;
    }
</style>
<body>
<div class="box1">
    <div class="box2" v-on:click="show($event,12)"></div>
    <!--绑定事件的时候使用$event-->
    <!--键盘事件-->
    <!--<input type="text" v-on:keyup="show1($event)">-->
    <!--<input type="text" v-on:keyup="show2($event)">-->
    <!--键盘事件两种写法-->
    <!--<input type="text" @keydown.13="show2($event)">-->
    <input type="text" @keydown.enter="show2($event)">
</div>

</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'body',
        data:{},
        methods:{
            show:function (ev,b) {
                console.log(b,ev.clientX,ev.clientY)
            },
            show1:function (ev) {
//                keydown:按下后触发函数,然后输入按键值
                //keyup:按键抬起来后触发函数,触发函数之前输入按键值
                alert(ev.keyCode)
            },
            show2:function (ev) {
                if(ev.keyCode==13){
                  alert('你按下了回车键')
                }
            }

        }
    })
</script>